<template>
  <div class="dashboard">
    <div class="header">
      <h1>月度租赁量趋势</h1>
    </div>

    <div class="main-content">
      <!-- 销售趋势折线图 -->
      <div class="chart-item" style="height: 200px;">
        <EChart
          :option="salesTrendOption"
          :width="400"
          :height="210"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import EChart from '@/components/EChart.vue'

// 折线图配置
const salesTrendOption = ref({
  title: {
    text: '',
    textStyle: { fontSize: 18, color: '#ffffff' },
    left: 20,
    top: -10
  },
  grid: {
    left: 30,
    right: 40,
    top: 20,
    bottom: 0
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月'],  // ✅ 正确：使用 data 属性
    axisLabel: { fontSize: 14, color: '#bfbfbf' }
  },
  yAxis: {
    type: 'value',
    axisLabel: { fontSize: 14, color: '#bfbfbf' }
  },
  series: [{
    type: 'line',
    data: [120, 132, 101, 134, 90, 230],  // ✅ 正确：使用 data 属性
    smooth: true,
    color: '#1890ff',
    areaStyle: {
      color: 'rgba(24, 144, 255, 0.1)'
    }
  }]
})


</script>

<style scoped lang="scss">
@import '@/styles/variables.scss';
@import '@/styles/mixins.scss';



.header {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  //background: transparent;
  //background: rgba(162, 17, 17, 0);
  //border-bottom: 1px solid $border;
}

h1 {
  color: #e6ff00;
  font-size: 24px;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px;
}

.chart-item {
  @include card-style;
  //height: 500px; /* ✅ 明确设置高度 */
}
</style>
